<template>
    <div class="container">
        <el-form class="zw-el-form" ref="formRef" :rules="rules" :model="form" label-width="170px">
            <el-form-item label="营业执照副本" prop="licenseImg" :error="uploadErrMsg.licenseImg">
                <ImgUpload @imgStateChange="imgChangeHandler($event, 'licenseImg')" :currentImg="form.licenseImg" />
            </el-form-item>
            <el-form-item
                label="法人身份证正反面"
                prop="ImgFrontForCorporate"
                :error="uploadErrMsg.ImgFrontForCorporate">
                <div class="corporateWrapper">
                    <div class="corporateItem">
                        <ImgUpload
                            @imgStateChange="imgChangeHandler($event, 'corporateFrontImg')"
                            :currentImg="form.corporateFrontImg" />
                        <span>正面</span>
                    </div>
                    <div class="corporateItem">
                        <ImgUpload
                            @imgStateChange="imgChangeHandler($event, 'corporateBackImg')"
                            :currentImg="form.corporateBackImg" />
                        <span>反面</span>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="类目资质上传" prop="businessImg" :error="uploadErrMsg.businessImg">
                <div class="categoryWrapper">
                    <ImgUpload
                        @imgStateChange="imgChangeHandler($event, 'businessImg')"
                        :currentImg="form.businessImg" />
                    <span>{{ qualifications }}{{ quaTxt }}</span>
                </div>
            </el-form-item>
            <el-form-item label="企业授权认证" prop="authorizePaper" :error="uploadErrMsg.authorizePaper">
                <div class="authWrapper">
                    <ImgUpload
                        @imgStateChange="imgChangeHandler($event, 'authorizePaper')"
                        :currentImg="form.authorizePaper" />
                    <span><a href="/docs/template.docx" download>下载授权模板</a></span>
                </div>
            </el-form-item>
            <el-form-item label="其他补充材料" prop="otherPaper">
                <div class="otherWrapper">
                    <ImgUpload
                        v-model="form.otherPaper"
                        :currentImgList="form.currentImgList"
                        :showList="true"
                        :limit="10" />
                </div>
            </el-form-item>
        </el-form>
        <div class="footer">
            <el-button class="warning" type="warning" plain @click="backHandler">上一步</el-button>
            <el-button class="btn" type="primary" @click="submitHandler">下一步</el-button>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, watch, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import storage from '@/commons/storage';
import request from '@/request';
import ImgUpload from '@/components/ImgUpload.vue';
import store from '@/store';

const useIdent = store.useIdentStore();
const props = defineProps({
    data: {
        type: Object,
        default: () => {}
    }
});
const emit = defineEmits(['submit', 'back']);
const router = useRouter();
const formRef = ref(null);
const form = reactive({
    /** 营业执照副本*/
    licenseImg: '',
    /** 法人身份证*/
    ImgFrontForCorporate: '',
    /** 法人身份证正面图片*/
    corporateFrontImg: '',
    /** 法人身份证反面图片*/
    corporateBackImg: '',
    /** 资质类目*/
    businessImg: '',
    /** 企业授权认证*/
    authorizePaper: '',
    /** 其他补充材料*/
    otherPaper: [],
    currentImgList: []
});
const qualifications = ref('');

const quaTxt = computed(() => {
    if (props.data.cateList && props.data.cateList.length !== 1) {
        return `(${
            [
                '一',
                '二',
                '三',
                '四',
                '五',
                '六',
                '七',
                '八',
                '九',
                '十',
                '十一',
                '十二',
                '十三',
                '十四',
                '十五',
                '十六',
                '十七',
                '十八',
                '十九',
                '二十'
            ][props.data.cateList.length - 1]
        }选一即可)`;
    } else {
        return '';
    }
});

const rules = reactive({
    licenseImg: [{ required: true, message: '请上传营业执照图片', trigger: 'blur' }],
    ImgFrontForCorporate: [{ required: true, message: '请上传法人身份证正反面', trigger: 'blur' }],
    authorizePaper: [{ required: true, message: '请上传企业授权认证图片', trigger: 'blur' }]
});

const uploadErrMsg = reactive({
    licenseImg: '',
    ImgFrontForCorporate: '',
    businessImg: '',
    authorizePaper: '',
    otherPaper: ''
});

// 经营类目拼接
watch(
    () => props.data,
    async res => {
        if (res.cateList) {
            const { data } = await request('businessCateList');
            const arr = data.list
                .reduce((res, cur) => {
                    return res.concat(cur.subList);
                }, [])
                .filter(item => data.cateList.some(target => target.categoriesSecondCode === item.categoryCode));
            qualifications.value = arr.reduce((res, cur) => {
                return res === '' ? `${cur}` : `${res}/${cur}`;
            }, '');
        }
    }
);
const imgChangeHandler = ({ imgUrl, msg }, prop) => {
    if ((prop === 'corporateFrontImg' || prop === 'corporateBackImg') && msg) {
        uploadErrMsg['ImgFrontForCorporate'] = msg;
    } else if (
        (prop === 'corporateFrontImg' && form.corporateBackImg) ||
        (prop === 'corporateBackImg' && form.corporateFrontImg)
    ) {
        form[prop] = imgUrl || '';
        if (msg) {
            formRef.value.clearValidate(prop);
        }
        uploadErrMsg[prop] = msg || '';
        form.ImgFrontForCorporate = 'complete';
        formRef.value.validateField('ImgFrontForCorporate');
    } else {
        form[prop] = imgUrl || '';
        if (msg) {
            formRef.value.clearValidate(prop);
        }
        uploadErrMsg[prop] = msg || '';

        if (!['corporateFrontImg', 'corporateBackImg', 'otherPaper'].includes(prop) && !msg) {
            formRef.value.validateField(prop);
        }
    }
};

const backHandler = () => {
    emit('back');
};

const submitHandler = () => {
    formRef.value.validate(async vaild => {
        if (vaild) {
            let formData = {
                tenantId: storage.get('ZW-TENANT-ID'),
                regNo: props.data.regNo,
                contactName: props.data.contactName,
                contactMobile: props.data.contactMobile,
                cateList: props.data.cateList,
                corporateName: props.data.corporateName,
                merchantName: props.data.merchantName,
                licenseImg: form.licenseImg,
                corporateFrontImg: form.corporateFrontImg,
                corporateBackImg: form.corporateBackImg,
                businessImg: form.businessImg,
                authorizePaper: form.authorizePaper
            };
            if (form.otherPaper.length !== 0) {
                formData.otherPaper = form.otherPaper
                    .reduce((res, cur) => {
                        return res.concat([cur.response.data.url]);
                    }, [])
                    .join(';');
            }
            await request('tenantReg', formData);
            emit('submit');
        }
    });
};
// 审核驳回反显图片
onMounted(() => {
    if (useIdent.tenantInfo.identStatus === 4) {
        form.ImgFrontForCorporate = 'complete';
        form.authorizePaper = useIdent.identRegInfo.authorizePaper;
        form.businessImg = useIdent.identRegInfo.businessImg;
        form.corporateBackImg = useIdent.identRegInfo.corporateBackImg;
        form.corporateFrontImg = useIdent.identRegInfo.corporateFrontImg;
        form.licenseImg = useIdent.identRegInfo.licenseImg;
        useIdent.identRegInfo.otherPaper &&
            (form.currentImgList = useIdent.identRegInfo.otherPaper.split(';').map(item => {
                return {
                    url: item,
                    response: {
                        data: {
                            url: item
                        }
                    }
                };
            }));
    }
});
</script>
<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    :deep(.img-uploader .el-upload) {
        border-radius: 4px;
        border: 1px solid #eaeaea;
    }
    :deep(.img-uploader .img-uploader-icon) {
        width: 80px;
        height: 80px;
        background: #f8f8f8;
        color: #ff6b00;
    }
    :deep(.img-uploader .has-upoload .has-upload-img) {
        width: 80px;
        height: 80px;
    }
    .corporateWrapper {
        :deep(.img-uploader .has-upoload .has-upload-img) {
            width: 180px;
            height: 120px;
        }
    }
}
.corporateWrapper {
    display: flex;
    .corporateItem {
        display: flex;
        align-items: center;
        margin-right: 12px;
        flex-direction: column;
        :deep(.img-uploader-icon) {
            width: 180px;
            height: 120px;
        }
        span {
            padding: 8px 0 0;
            font-size: 14px;
            font-weight: 400;
            color: #969696;
            line-height: 20px;
        }
    }
}
.categoryWrapper span {
    font-size: 14px;
    font-weight: 400;
    color: #969696;
    line-height: 20px;
}
.authWrapper span a {
    font-size: 14px;
    font-weight: 400;
    color: #ff6b00;
    line-height: 20px;
    text-decoration: underline;
}
.footer {
    display: flex;
    align-items: center;
    justify-content: center;
    .warning {
        width: 88px;
        background: #fff;
    }
    .btn {
        width: 88px;
    }
}
.otherWrapper {
    :deep(.el-upload--picture-card) {
        width: 80px;
        height: 80px;
    }
    :deep(.el-upload-list--picture-card .el-upload-list__item) {
        width: 80px;
        height: 80px;
    }
    :deep(.el-upload-list--picture-card .el-upload-list__item-thumbnail) {
        width: 80px;
        height: 80px;
    }
    :deep(.el-upload-list--picture-card .el-upload-list__item-status-label) {
        display: none;
    }
    :deep(.el-upload-list__item .el-icon--close-tip) {
        display: none !important;
    }
}
</style>
